<template>
	<div class="radio-group">
		<radio-group @change="radioChange" class="radio" v-if="optionType == 'default'">
			<div v-for="(item, index) in options" :key="item.value" class="item">
				<div>
					<radio :disabled="disabled" :value="'' + item.value" :checked="checkedRadio(item.value)" style="transform: scale(0.7)" />
				</div>
				<div>{{ item.label }}</div>
			</div>
		</radio-group>
		<radio-group @change="radioChange" class="buttonType" v-else>
			<div v-for="(item, index) in options" :key="item.value" class="item">
				<div>
					<radio :disabled="disabled" :value="'' + item.value" :checked="checkedRadio(item.value)" :style="sizeStyle" />
				</div>
				<div :style="sizeStyleText">{{ item.label }}</div>
			</div>
		</radio-group>
	</div>
</template>

<script>
export default {
	name: "vRadio",

	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: [Number, String],
			default: null,
		},
		options: {
			type: Array,
			default: () => [],
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		optionType: {
			type: String,
			default: "default",
		},
		size: {
			type: String,
			default: "medium",
		},
	},
	components: {},
	data() {
		return {
			checked: false,
		}
	},
	computed: {
		sizeStyle() {
			let scale = 0.7
			switch (this.size) {
				case "mini":
					scale = 0.5
					break
				case "medium":
					scale = 0.7
					break
				case "small":
					scale = 0.6
					break
				default:
					scale = 0.7
					break
			}
			return {
				transform: `scale(${scale})`,
			}
		},
		sizeStyleText() {
			let fontsize = 28
			switch (this.size) {
				case "mini":
					fontsize = 24
					break
				case "medium":
					fontsize = 28
					break
				case "small":
					fontsize = 26
					break
				default:
					fontsize = 28
					break
			}
			return {
				fontSize: `${fontsize}rpx`,
			}
		},
	},

	methods: {
		checkedRadio(val) {
			if (this.value == val) {
				return true
			}
		},
		radioChange(e) {
			this.$emit("update:value", +e.detail.value)
		},
	},
}
</script>
<style lang="scss" scoped>
.radio-group {
	.radio {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		.item {
			display: flex;
			align-items: center;
		}
	}
	.buttonType {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		.item {
			display: flex;
			align-items: center;
		}
	}
}
</style>
